<template>
  <div>
    <cartHeader>
      <template v-slot:headname>列表页</template>
    </cartHeader>
    <!-- 搜索框 -->
    <div class="search">
      <van-search placeholder="搜索鲜花" shape="round" style="width:300px;height:31px"></van-search>
      <span class="login" color="red">搜索</span>
    </div>
    <div class="navlist">
      <div
        class="f1"
        v-for="(item,index) in navlist"
        :key="index"
        :class="{active:index==currentindex}"
        @click="fock(index,$event)"
      >{{item}}</div>
    </div>
    <!-- <div class="bottomlist">
      <div
        class="f2"
        v-for="(item,index) in bottomlist"
        v-show="index== currentindex"
        :key="index"
      >{{item}}</div>
    </div>-->

    <listRight ref="broder" />
  </div>
</template>
<script>
// import { Dialog } from "vant";
const listRight = () => import("../components/List-right");
const cartHeader = () => import("../components/Cart-header");
export default {
  data() {
    return {
      currentindex: 0,
      navlist: ["综合", "销量", "价格", "时间"],
      bottomlist: ["a", "b", "c", "d"]
    };
  },
  components: {
    listRight,
    cartHeader
  },
  methods: {
    fock(index, ev) {
      console.log(index);
      this.currentindex = index;
    }
  }
};
</script>


<style scoped lang="scss">
@function vw($px) {
  @return ($px / 375) * 100vw;
}

* {
  margin: 0;
  padding: 0;
}
.navlist {
  width: vw(375);
  height: vw(38);
  display: flex;
  justify-content: space-around;
}
.active {
  color: red;
  font-weight: bold;
}
.search {
  width: vw(375);
  height: vw(42);
  display: flex;
  justify-content: space-around;
  align-items: center;
  .login {
    background: red;
    border-radius: 10%;
    width: vw(50);
    height: vw(30);
    color: #ffffff;
    font-size: vw(15);
    font-weight: bold;
    text-align: center;
    line-height: vw(30);
  }
}
body,
button,
input,
select,
textarea {
  color: #333;
}

.rui-head {
  width: vw(375);
  height: vw(46);
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: vw(1) solid #f2f2f2;
  position: relative;
}
// 组件样式
.amor {
  margin-top: vw(10);
  width: vw(374);
  display: flex;
  flex-wrap: wrap;

  .amor_1 {
    background: #ffffff;
    margin-left: vw(6);
    margin-bottom: vw(6);
    width: vw(179);
    height: vw(232);
    border: 1px solid red;
    img {
      width: vw(179);
      height: vw(179);
    }
    .amor_2 {
      padding-left: vw(10);
      height: vw(53);
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      .span4 {
        font-size: vw(13);
      }
      .solo {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .span5 {
          font-size: vw(16);
          font-weight: bold;
          color: red;
        }
        .span6 {
          font-size: 13px;
          color: gray;
        }
      }
    }
  }
}
</style>